<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/plugins/chosen/chosen.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/bootstrap-table.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/style.css}" rel="stylesheet"/>
    <style type="text/css">
        .popup-select {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 15px;
        }

        .bootstrap-table .table > thead > tr > th {
            padding: 8px;
            line-height: 24px;
            vertical-align: top;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .form-control {
            display: inline-block;
            width: 200px;
            vertical-align: middle;
        }

        /*.bootstrap-table .table th:first-child, .bootstrap-table .table td:first-child { text-align: center; }*/
        .bootstrap-table .table > thead > tr > th {
            padding: 0;
        }
    </style>
</head>
<body>
<div style="padding:20px;" id="popup-tpl">
    <div class="toolbar">
        <form class="form-inline">
            <div class="popup-select">
                <div class="input-group">
                    <select id="locationSelect" data-placeholder="按网点添加" class="chosen-select" multiple
                            style="width:350px;" tabindex="4">
                        <option th:each="lo: ${locations}" th:value="${lo}" th:text="${lo}" hassubinfo="true">北京
                        </option>
                    </select>
                </div>
            </div>
            <input id="imeiInput" type="text" class="form-control m-b m-r" placeholder="请输入设备IMEI码">
            <button id="addBtn" type="button" class="btn btn-success m-b m-r">添加</button>
            <!--<button id="delBtn" type="button" class="btn btn-danger m-b m-r">删除</button>-->
        </form>
    </div>
    <table id="table" data-classes="table table-hover table-condensed" data-striped="true"
           data-mobile-responsive="true">
        <thead>
        <tr>
            <th>设备号</th>
            <th>布放网点</th>
            <th>操作</th>
        </tr>
        </thead>
    </table>
</div>
<input id="allVals" name="allVals" type="hidden">
<input id="grayIds" name="grayIds" type="hidden">

<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/bootstrap.min.js}"></script>
<script th:src="@{/static/js/content.js}"></script>
<script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.js}"></script>
<script th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>
<script th:src="@{/static/js/modules/app/gray-publish.js}"></script>
<script>
    function getDatas() {
        return $('#table').bootstrapTable('getData', false);
    }
</script>
</body>
</html>